<template>
  <div class="detail-wrap">
    <div v-tit="'调度任务信息'">
      <GForm
        ref="detail"
        :config="formConfig"
        inline
        disabled
        v-model="form"
      ></GForm>
    </div>
    <div v-tit="'调度任务明细信息'" >
      <GTable
        ref="table"
        api="/v1/edi/plJobdetail/selectJobDetailPage"
        :apiParams="apiParams"
        :columnSource="baseColumns"
        :cbFun="cbFun"
        :otherHeight="216"
        :tmsShowFilter="false"
        :searchBox="false"
        @head-btn-click="handleAdd"
        @edit="edit"
        @delete="del"
      />
    </div>

    <el-dialog
      :title="dialogModule.title"
      :visible.sync="dialogModule.flag"
      center
      v-dialogDrag
      width="720px"
      @closed="closed"
    >
      <div v-tit="'目标报文配置详情'">
        <GForm
          ref="detailInfo"
          label-width="150px"
          :config="detailFormConfig"
          :rules="formRules"
          v-model="detailForm"
        ></GForm>
      </div>
      <span slot="footer">
        <el-button type="primary" @click="handleConfirm">确定</el-button>
        <el-button @click="closed()">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "dispatchInfo",
  data() {
    return {
      form: {
        jobName: null,
        jobGroup: null,
        jobType: null,
      },
      dialogModule: {
        flag: false,
        title: "",
        type: null,
        data: null,
        loading: false,
      },
      detailForm: {
        queryName: "",
        querycondition: "",
        sequence: "",
        subSql: "",
      },
    };
  },
  computed: {
    baseColumns() {
      return [
        {
          label: "子查询名称",
          prop: "queryName",
          input: "input",
        },
        {
          label: "查询条件",
          prop: "querycondition",
          input: "input",
        },
        {
          label: "查询顺序",
          prop: "sequence",
          input: "input",
        },
        {
          label: "查询数据子sql",
          prop: "subSql",
          input: "input",
        },
        {
          label: "操作",
          prop: "action",
          input: "action",
          btnConfig: [
            {
              label: "修改",
              invalid: "edit",
              type: "primary",
              // permi: ['timeTask:pause'],
              // disabled: data => data.triggerState != 'WAITING'
            },
            {
              label: "删除",
              invalid: "delete",
              type: "warning",
              // permi: ['timeTask:pause'],
              // disabled: data => data.triggerState != 'WAITING'
            },
          ],
          headBtn: {
            label: "新增",
            type: "primary",
          },
        },
      ];
    },
    formConfig() {
      return [
        {
          label: "任务名称",
          prop: "jobName",
          type: "input",
        },
        {
          label: "任务分组",
          prop: "jobGroup",
          type: "input",
        },
        {
          label: "任务类型",
          prop: "jobType",
          type: "select",
          options: [
            { label: "自定义定时任务", value: "0" },
            { label: "api定时任务", value: "1" },
            { label: "insert定时任务", value: "2" },
          ],
        },
      ];
    },
    detailFormConfig() {
      return [
        {
          label: "子查询名称",
          prop: "queryName",
          type: "input",
        },
        {
          label: "查询条件",
          prop: "querycondition",
          type: "input",
        },
        {
          label: "查询顺序",
          prop: "sequence",
          type: "input",
        },
        {
          label: "查询数据子sql",
          prop: "subSql",
          type: "input",
        },
      ];
    },
    formRules() {
      return {
        queryName: [
          {
            required: true,
            message: "请填写子查询名称",
            trigger: "blur",
          },
        ],
        querycondition: [
          {
            required: true,
            message: "请填写查询条件",
            trigger: "blur",
          },
        ],
        sequence: [
          {
            required: true,
            message: "请填写查询顺序",
            trigger: "blur",
          },
        ],
        subSql: [
          {
            required: true,
            message: "请填写查询数据子sql",
            trigger: "blur",
          },
        ],
      };
    },
    apiParams() {
      return { jobId: this.$route.query.id };
    },
  },
  methods: {
    del(data) {
      this.$confirm("此操作将删除调度任务明细, 是否继续?", "提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$post(
            "/v1/edi/plJobdetail/delJobDetailById",
            data
          ).then((res) => {
            this.$message.success(res.returnMgr);
            this.getTableData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleConfirm() {
      const params = this._.cloneDeep(this.detailForm);
      params.jobId = this.$route.query.id;
      let promise = null;
      if (this.dialogModule.type == "add") {
        promise = this.$post(
          "/v1/edi/plJobdetail/addJobDetail",
          params
        );
      } else {
        promise = this.$post(
          "/v1/edi/plJobdetail/updJobDetail",
          params
        );
      }
      promise.then((res) => {
        this.$message.success(res.returnMgr);
        this.getTableData();
        this.closed();
        this.dialogModule.flag = false;
      });
    },
    edit(data) {
      this.dialogModule.title = "目标报文配置详情信息";
      this.dialogModule.type = "edit";
      this.detailForm = data;
      this.dialogModule.flag = true;
    },
    handleAdd() {
      this.dialogModule.title = "目标报文配置详情新增";
      this.dialogModule.type = "add";
      this.dialogModule.flag = true;
    },
    closed() {
      this.$refs.detailInfo?.resetFields();
      this.dialogModule.flag = false;
    },
    cbFun(res) {
      return { list: res.data.page.records, total: res.data.page.total };
    },
    async getTableData() {
      this.$refs.table.getTableData();
    },
  },
  created(){
    this.form = this.$route.query;
  },
};
</script>

<style lang="scss" scoped>
.detail-wrap {
  height: 100%;
  position: relative;
  .col-content {
    padding: 10px;
    span {
      display: inline-block;
      min-width: 72px;
    }
  }
  .tem-wrap {
    height: 160px;
    overflow: auto;
    padding: 10px;
    margin: 10px 0;
    border: 1px dashed #999;
    border-radius: 6px;
  }
  .target-list {
    line-height: 36px;
    padding-left: 2em;
    li {
      position: relative;
      &::after {
        content: "";
        position: absolute;
        width: calc(100% - 4em);
        height: 1px;
        background: #999;
        left: 4em;
        top: 17px;
      }
    }
  }
  .source-list {
    .el-select {
      margin: 4px;
      width: 180px;
    }
  }
  .source-title {
    line-height: 36px;
    span {
      display: inline-block;
      padding-left: 10px;
    }
  }
  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #f4f4f4;
    text-align: center;
    padding: 10px 0;
  }
}
</style>
